<template>
  <div class="search-container">
    <a-input
      v-model:value="searchValue"
      :placeholder="placeholder"
      class="search-input search-input-gradient"
      size="large"
      allowClear
      @input="handleInput"
      @clear="handleClear"
    >
      <template #prefix>
        <SearchOutlined />
      </template>
    </a-input>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { defineOptions } from 'vue';

  defineOptions({
    name: 'SearchInput',
  });

  interface Props {
    modelValue: string;
    placeholder?: string;
  }

  interface Emits {
    (e: 'update:modelValue', value: string): void;
    (e: 'search', value: string): void;
  }

  const props = withDefaults(defineProps<Props>(), {
    placeholder: '搜索...',
  });

  const emit = defineEmits<Emits>();

  const searchValue = ref(props.modelValue);

  // 监听外部传入的值变化
  watch(
    () => props.modelValue,
    (newValue) => {
      searchValue.value = newValue;
    }
  );

  // 监听内部值变化，同步到外部
  watch(searchValue, (newValue) => {
    emit('update:modelValue', newValue);
  });

  const handleInput = () => {
    emit('search', searchValue.value);
  };

  const handleClear = () => {
    searchValue.value = '';
    emit('search', '');
  };
</script>

<style scoped lang="scss">
  .search-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
  }

  .search-input {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .search-input :deep(.ant-input) {
    background: transparent !important;
    color: white !important;
    font-size: 1.1rem;
    padding: 0.8rem 1.5rem !important;
    height: auto !important;
    line-height: 1.5;
  }

  .search-input :deep(.ant-input::placeholder) {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.1rem;
  }

  .search-input :deep(.ant-input-prefix) {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.2rem;
    margin-right: 0.5rem;
  }

  .search-input :deep(.ant-input-suffix) {
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .search-input :deep(.ant-input-clear-icon) {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.3rem !important;
    transition: all 0.3s ease;
    padding: 4px !important;
    border-radius: 50% !important;
  }

  .search-input :deep(.ant-input-clear-icon:hover) {
    color: white !important;
    transform: scale(1.2);
  }

  .search-input:focus-within {
    border-color: #1890ff !important;
    box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.15) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
  }

  .search-input:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }

  .search-input-gradient {
    :deep(.ant-input-affix-wrapper) {
      border-radius: 24px;
      transition:
        border 0.3s,
        box-shadow 0.3s;
      border: 2px solid transparent;
      background-clip: padding-box;
      box-shadow: none;
    }
    :deep(.ant-input-affix-wrapper.ant-input-affix-wrapper-focused) {
      border: 2px solid;
      border-image: linear-gradient(90deg, #6dd5ed, #2193b0, #ee9ca7, #ffdde1) 1;
      box-shadow:
        0 0 12px 2px #6dd5ed66,
        0 0 0 2px #2193b055;
      background-clip: padding-box;
    }
  }

  @media (max-width: 768px) {
    .search-container {
      max-width: 100%;
      padding: 0 1rem;
    }

    .search-input :deep(.ant-input) {
      font-size: 1rem;
      padding: 1rem 1.2rem !important;
    }
  }
</style>
